<template>
  <div class="social-section">
    <div id="gitalk-container" v-if="show"></div>
  </div>
</template>

<script type="text/ecmascript-6">
import BrowseMore from '@/components/views/BrowseMore'

export default {
  props: {
    type: String,
    postId: Number
  },
  data () {
    return {
      show: null
    }
  },
  components: {
    'browse-more': BrowseMore
  },
  watch: {
    postId (value) {
      this.show = value
      this.$nextTick(() => {
        // eslint-disable-next-line no-undef
        var gitalk = new Gitalk({
          clientID: '8db80d8a6d09038909cb',
          clientSecret: '7591598b37c81c1e5d0986bfa70394a89d37f406',
          repo: 'hongge.github.com',
          owner: 'xinghunbuxiu',
          labels: [this.type],
          admin: ['xinghunbuxiu'],
          id: location.href, // Ensure uniqueness and length less than 50
          distractionFreeMode: false // Facebook-like distraction free mode
        })
        gitalk.render('gitalk-container')
      })
    }
  }
}
</script>
